<#include "/common/layout.html">
<@header>
	<link rel="stylesheet" href="${ctx}/plugins/bootstrap-table/bootstrap-table.min.css">
</@header>
<@body>
<div class="right_col" role="main">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
			<form class="form-inline">
				<div class="row x_title">
					<div class="col-md-6">
						<#if shiro.hasPermission("addUser")>
			            	<a class="btn btn-info dialog" href="javascript:;" data-url="${ctx}/system/user/add" data-title="创建用户" data-width="850" data-height="550"><i class="fa fa-plus"></i> 创建用户</a>
			            </#if>
                  	</div>
                  	<div class="col-md-6">
	                  	<div class="input-group pull-right">
						  <input type="text" name="search" id="search" class="form-control" placeholder="请输入用户名">
						  <div class="input-group-btn">
						    <button class="btn btn-default" id="btn_query" type="button"><i class="fa fa-search"></i></button>
						    <a href="javascript:refreshTable();" class="btn btn-default"><i class="fa fa-refresh"></i></a>
						  </div>
						</div>
                  	</div>
        		</div>
			</form>
			<div class="x_content">
				<table id="table" class="table table-striped table-bordered table-hover"></table>
			</div>
        </div>
      </div>
    </div>
</div>
</@body>
<@footer>
<script src="${ctx}/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx}/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
	var editFlag = '${shiro.hasPermission("editUser")}';
	var deleteFlag = '${shiro.hasPermission("deleteUser")}';
	$("#table").bootstrapTable({
		url: '${ctx}/system/user/listUser', //请求后台的URL（*）
		contentType: "application/x-www-form-urlencoded",//用post请求，这个是必须条件，必须加上，get可以不用，亲测
		dataType: "json",
		method: "POST",//请求方式（*）
		//toolbar: '#toolbar', //工具按钮用哪个容器
		undefinedText: "-", /*为undefiend时显示的字*/
		striped: false, //是否显示行间隔色
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pagination: true, //是否显示分页（*）
		sortable: false, //是否启用排序
		sortOrder: "asc", //排序方式
		sortName: "", //排序方式
		toolbar: '', // 指定工作栏
		loadingFontSize: 13, // 自定义加载文本的字体大小
		//search: true, //是否使用客户端搜索
		queryParams: queryInitParams,//传递参数（*）
		responseHandler: responseHandler,
		queryParamsType: "limit",
		sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
		pageNumber: 1, //初始化加载第一页，默认第一页
		pageSize: 10, //每页的记录行数（*）
		pageList: [10, 20, 50, 999], //可供选择的每页的行数（*）
		showColumns: false, //是否显示所有的列
		showRefresh: false, //是否显示刷新按钮
		minimumCountColumns: 2, //最少允许的列数
		clickToSelect: true, //是否启用点击选中行
		strictSearch: true,
		//height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		showToggle: false, //是否显示详细视图和列表视图的切换按钮
		uniqueId: "id", //每一行的唯一标识，一般为主键列
		cardView: false, //是否显示详细视图
		detailView: false, //是否显示父子表
		showExport: false, //是否显示导出
		exportDataType: 'basic', //'basic', 'all', 'selected'.
		escape: true,//html转意
		// align: "center",
		columns: [
			{checkbox: true },
	        {
	            field: 'userName',
	            title: '用户名',
	            align : "center"
	        }, {
	            field: 'userDesc',
	            title: '描述',
	            align : "center"
	        },
	        {
	            field: 'createTime',
	            title: '创建时间',
	            align : "center"
	        },
	        {
	            field: 'deptName',
	            title: '部门',
	            align : "center"
	        },
	        {
	            field : 'roleState',
	            title : '状态',
	            align : "center",
	            formatter : function(value, row, index) {
	            	if(row.userState == 1) {
	            		return '<font color="green">启用</font>';
	            	} else {
	            		return '<font color="red">禁用</font>';
	            	}

	            }
	        },
	        {
	            field : 'operation',
	            title : '操作',
	            align : "center",
	            formatter : function(value, row, index) {
	            	if (row.id != 1) {
		            	var actions = [];
		            	if(editFlag == 'true') {
		            		actions.push('<a class="btn btn-info btn-xs dialog" data-url="${ctx}/system/user/edit/'+ row.id +'" data-title="编辑用户" data-width="850" data-height="550"><i class="fa fa-pencil"></i>编辑</a>')
		            	}
		            	if(deleteFlag == 'true') {
	            			actions.push('<a class="btn btn-danger btn-xs" data-tiggle="ajax" data-submit-url="${ctx}/system/user/delete/'+ row.id +'" data-confirm="您确定要删除该条记录吗?"><i class="fa fa-trash-o"></i>删除</a>')
		            	}
	            		return actions.join('');
	            	} else {
	            		return "";
	            	}
	            }
	        }
		],//表格列
		onLoadSuccess: tableLoadSuccess, //成功渲染回调
	})
	/* 表格查询参数 */
	function queryInitParams(params) {
		var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
			limit: params.limit, //页面大小
			offset: params.offset ,//页码
			search: $("#search").val(),
		};
		return temp;
	}
	/* 表格加载成功事件 */
	function tableLoadSuccess(data) {
		$(".bs-checkbox").css('vertical-align','middle');
	}
	function responseHandler(data) {
		return data;
	}
	/*搜索*/
	$("#btn_query").click(function() {
		var params = $("#table").bootstrapTable('getOptions');
		$("#table").bootstrapTable('refresh', params);
	})

	// 删除单个记录
	$("body").delegate("*[data-tiggle='ajax']", "click", function() {
		var dataUrl = $(this).attr("data-submit-url");
		var dataConfirm = $(this).attr("data-confirm");
		$.confirm({
			type: 'red',
			closeIcon: true,
		    title: '警告',
		    content: dataConfirm ? dataConfirm : '确认操作?',
		    buttons: {
		        '确认': {
		            btnClass: 'btn-blue',
		            action: function(){
		            	$.post(dataUrl,{},function(data){
							if(data.code==200){
								refreshTable();
								layer.msg(data.msg, { icon : 1 });
							}else{
								$.alert({
								    title: '提示',
								    content: data.msg,
								    buttons:{"好的":{ btnClass: 'btn-blue'}}
								});
							}
						});
		            }
		        },
		        '取消':{}
		    }
		});

	});

	function refreshTable() {
		var params = $("#table").bootstrapTable('getOptions');
		$("#table").bootstrapTable('refresh', params);
	}
</script>
</@footer>
